import React, { useEffect, useState, useRef } from 'react';
import { Row, Col, Button } from 'antd';
// import { useHistory } from 'react-router-dom';
import * as echarts from 'echarts';
// import { getCategoryAndNumber, getAdminAndNumber, getLevelAndNumber, getDayAndNumber } from '@/api/overview'; // API

const Overview = () => {
  const [userData, setUserData] = useState({
    name: '',
    sex: '',
    identity: '',
    department: '',
  });

  // const history = useHistory();

  const manageUserRef = useRef(null);
  const productCategoryBarRef = useRef(null);
  const massageLevelRef = useRef(null);
  const loginWeekRef = useRef(null);

  useEffect(() => {
    getUserInfo();
    manageUser();
    productCategoryBar();
    massageLevel();
    massageAllDay();
  }, []);

  const getUserInfo = async () => {
    const res = await getUserInfo(localStorage.getItem('id'));
    setUserData({
      name: res.name,
      sex: res.sex,
      identity: res.identity,
      department: res.department,
    });
  };

  const manageUser = async () => {
    const mu = echarts.init(manageUserRef.current);
    mu.showLoading();
    // const data = await getAdminAndNumber();
    mu.hideLoading();
    mu.setOption({
      title: {
        text: '管理与用户对比图',
        left: 'center',
      },
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', left: 'left', padding: [20, 20, 20, 20] },
      series: [{
        type: 'pie',
        radius: '65%',
        // data: data.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      }],
    });
    window.addEventListener('resize', () => mu.resize());
  };

  const productCategoryBar = async () => {
    const pcb = echarts.init(productCategoryBarRef.current);
    pcb.showLoading();
    // const data = await getCategoryAndNumber();
    pcb.hideLoading();
    pcb.setOption({
      title: {
        text: '产品类别库存总价图',
        top: '3%',
        textStyle: { fontSize: 16 },
      },
      tooltip: { trigger: 'axis' },
      // xAxis: { type: 'category', data: data.category },
      yAxis: { type: 'value' },
      series: [{
        // data: data.price,
        type: 'bar',
        barWidth: 40,
        colorBy: 'data',
      }],
    });
    window.addEventListener('resize', () => pcb.resize());
  };

  const massageLevel = async () => {
    const ml = echarts.init(massageLevelRef.current);
    ml.showLoading();
    // const data = await getLevelAndNumber();
    ml.hideLoading();
    ml.setOption({
      title: {
        text: '公告等级分布图',
        top: '3%',
        textStyle: { fontSize: 16 },
      },
      tooltip: { trigger: 'item' },
      legend: { top: '5%', left: 'center' },
      series: [{
        type: 'pie',
        radius: ['35%', '65%'],
        avoidLabelOverlap: false,
        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
        label: { show: false, position: 'center' },
        emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold' } },
        labelLine: { show: false },
        // data: data.data,
      }],
    });
    window.addEventListener('resize', () => ml.resize());
  };

  const massageAllDay = async () => {
    const mad = echarts.init(loginWeekRef.current);
    mad.showLoading();
    // const data = await getDayAndNumber();
    mad.hideLoading();
    mad.setOption({
      title: {
        text: '每日登录人数图',
        top: '3%',
        textStyle: { fontSize: 16 },
      },
      tooltip: { trigger: 'item' },
      // xAxis: { type: 'category', data: data.week },
      yAxis: { type: 'value' },
      // series: [{ data: data.number, type: 'line' }],
    });
    window.addEventListener('resize', () => mad.resize());
  };

  const routerTo = (path) => {
    history.push(`/${path}`);
  };

  return (
    <div className="overview-wrapped">
      <div className="top-content-wrapped">
        <div className="person-info">
          <div className="person-avatar-wrapped">
            {/* <img src={userStore.imageUrl} alt="User Avatar" style={{ width: 100, height: 100 }} /> */}
            <span className="department">所属部门：{userData.department}</span>
            <div className="company">所属公司：济南晏鲸创意设计有限公司</div>
          </div>
          <div className="line-wrapped">
            <div className="line"></div>
          </div>
          <div className="detail-info-wrapped">
            <p>姓名：{userData.name}</p>
            <p>性别：{userData.sex}</p>
            <p>身份：{userData.identity}</p>
            <p>分管领域：超级管理</p>
            <p>权限：最高权限</p>
          </div>
        </div>
        <div className="manage-user" ref={manageUserRef}></div>
      </div>

      <div className="mid-content-wrapped">
        <div className="product-category-bar" ref={productCategoryBarRef}></div>
        <div className="mid-content-right">
          <div className="title">常用管理</div>
          <Row gutter={20}>
            <Col span={6}>
              <div className="button-area" onClick={() => routerTo('users_manage')}>
                {/* <SvgIcon iconName="user" style={{ width: 24, height: 24 }} /> */}
                <span className="button-name">用户管理</span>
              </div>
            </Col>
            <Col span={6}>
              <div className="button-area" onClick={() => routerTo('product_manage_list')}>
                {/* <SvgIcon iconName="product" style={{ width: 24, height: 24 }} /> */}
                <span className="button-name">产品管理</span>
              </div>
            </Col>
            <Col span={6}>
              <div className="button-area" onClick={() => routerTo('message_list')}>
                {/* <SvgIcon iconName="notice" style={{ width: 24, height: 24 }} /> */}
                <span className="button-name">系统消息</span>
              </div>
            </Col>
            <Col span={6}>
              <div className="button-area" onClick={() => routerTo('set')}>
                {/* <SvgIcon iconName="me" style={{ width: 24, height: 24 }} /> */}
                <span className="button-name">个人信息</span>
              </div>
            </Col>
            <Col span={6}>
              <div className="button-area">
                {/* <SvgIcon iconName="message" style={{ width: 24, height: 24 }} /> */}
                <span className="button-name">部门信息</span>
              </div>
            </Col>
            <Col span={6}>
              <div className="button-area" onClick={() => routerTo('set')}>
                {/* <SvgIcon iconName="set" style={{ width: 24, height: 24 }} /> */}
                <span className="button-name">系统设置</span>
              </div>
            </Col>
          </Row>
        </div>
      </div>

      <div className="footer-content-wrapped">
        <div className="massage-level" ref={massageLevelRef}></div>
        <div className="login-week" ref={loginWeekRef}></div>
      </div>
    </div>
  );
};

export default Overview;
